<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师授课管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <div style="float: left;position: relative ; margin-bottom: 20px" >
      <div  style="margin-bottom: 10px;font-weight: bold;color: #1684b0;font-family: 幼圆;font-size: 25px">
        <span>查询教师课程信息:</span>
      </div>
      <el-input placeholder="请输入教师名称" v-model="wd">
        <el-button slot="append" icon="el-icon-search"
                   style="background-color: #409EFF;color: white"
                   @click="search()"/>
      </el-input>
    </div>
    <el-button type="primary" style="float: right;margin-top: 0" v-show="isShow" @click="goBack()">返回</el-button>
    <el-table :data="teacherAndCourseArr"
              stripe
              style="width: 100%">
      <!--type=index  设置这一列显示的内容为编号-->
      <el-table-column type="index" label="教师编号" width="100">
      </el-table-column>
      <el-table-column prop="teacherName" label="姓名">
      </el-table-column>
      <el-table-column prop="url" label="教师头像" width="120">
        <template slot-scope="scope">
          <div class="block"><el-avatar :size="80" :src="scope.row.url"/></div>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
      </el-table-column>
      <el-table-column prop="age" label="年龄">
      </el-table-column>
      <el-table-column prop="number" label="联系电话" width="120px">
      </el-table-column>
      <el-table-column prop="seniority" label="教龄">
      </el-table-column>
      <el-table-column prop="grade" label="班级">
      </el-table-column>
      <el-table-column prop="level" label="教师级别">
      </el-table-column>
      <el-table-column prop="courseName" label="课程名称">
      </el-table-column>
      <el-table-column prop="type" label="课程类型">
      </el-table-column>
      <el-table-column prop="dept" label="所属系">
      </el-table-column>
      <el-table-column prop="year" label="年级">
      </el-table-column>
      <el-table-column prop="times" label="授课时间">
      </el-table-column>
      <el-table-column prop="loc" label="授课地点">
      </el-table-column>
      <el-table-column prop="credit" label="学分">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teacherAndCourseArr: [],
      wd:'',
      isShow:false,
    };
  },
  methods: {
    loadTeacherList() {
      let url = 'http://localhost:9800/teacher/TCList';
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state==20000){
          this.teacherAndCourseArr = responseBody.data;
        }else {
          this.$message.error(responseBody.message)
        }
      })
    },

    // 执行删除功能
    handleDelete(teacher) {
      let url = 'http://localhost:9800/teacher/' + teacher.id + '/delete';
      console.log('url=' + url);
      this.axios.post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.loadTeacherList();
        }
      });
    },
    search(){
      let url = 'http://localhost:9800/teacher/selectWdToTC?wd='+this.wd;
      if (this.wd !== ''){
        this.axios.get(url).then((response)=>{
          let responseBody = response.data;
          if (responseBody.state == 20000){
            this.teacherAndCourseArr = responseBody.data;
            this.isShow = true;
          }else {
            this.$message.error(responseBody.message);
          }
        })
      }else {
        this.$message.warning("请输入查询信息!")
      }
    },
    // 处理删除教师的功能
    openDeleteConfirm(teacher) {
      let message = '此操作将永久删除[' + teacher.name + ']教师, 是否继续?'
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(teacher);
        this.$message.success("删除成功!")
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    goBack(){
      this.loadTeacherList();
      this.wd ='';
      this.isShow = false;
    },
  },
  mounted() {
    this.loadTeacherList();
  }
}
</script>